<template>
  <div>
    <span @click="route_goto(item)" v-for="item in breadList" :key="item"> / {{ item }}</span>
  </div>
    
</template>

<script>
export default {
  name: 'breadcrumb',
  props: {
    breadList:{
      type: Array,
      default: ()=> ["Main"]
    }
  },
  data(){
    return {
    };
  },
  watch:{
    $route(){
      this.getBreadcrumb();
    }
  },
  methods:{
    isHome(route){
      return route.name == "home";
    },
    getBreadcrumb(){
      let matched = this.$route.matched;
      console.log("===============", matched)
    },
    route_goto(item){
      console.log("====goto", item)
      switch(item)
      {
        case 'Main':
          this.$router.push({
            path:"/"
          })
          break
        case 'Linux':
          this.$router.push({
            path:"Linux"
          })
          break
        case 'Android':
          this.$router.push({
            path:"Android"
          })
          break
        case 'Storage':
          this.$router.push({
            path:"Storage"
          })
          break

      }
      
    }
  },
  created(){
    console.log("this.$route", this.$route.meta.title)
    this.getBreadcrumb();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">

</style>
